<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多格式视频播放器</title>
    <link rel="stylesheet" href="./player/model.css" />
    <!-- 流媒体格式支持库 -->
    <script src="./player/flv.min.js"></script>
    <script src="./player/hls.min.js"></script>
    <script src="./player/dash.all.min.js"></script>
    <script src="./player/shaka-player.compiled.js"></script>
    <script src="./player/webtorrent.min.js"></script>
    <!-- 引入NPlayer核心库 -->
    <script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>

    <style>
      :root {
        /* Neumorphism Color Palette */
        --bg-primary: #e0e5ec;
        --bg-secondary: #f0f4f8;
        --bg-dark: #d1d9e6;
        --text-primary: #2c3e50;
        --text-secondary: #5a6c7d;
        --text-muted: #8b9dc3;
        --accent-primary: #667eea;
        --accent-secondary: #764ba2;
        --success: #4ecdc4;
        --warning: #f7b731;
        --danger: #fc5c65;
        --shadow-light: #ffffff;
        --shadow-dark: #a3b1c6;
        --border-radius: 20px;
        --border-radius-small: 12px;
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
      }

      body {
        background: linear-gradient(
          135deg,
          var(--bg-primary) 0%,
          var(--bg-secondary) 100%
        );
        color: var(--text-primary);
        min-height: 100vh;
        padding: 20px;
        overflow-x: hidden;
        animation: pageLoad 1s ease-out;
      }

      @keyframes pageLoad {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 30px;
        animation: containerFloat 1.2s ease-out 0.3s both;
      }

      @keyframes containerFloat {
        from {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      header {
        grid-column: 1 / -1;
        text-align: center;
        padding: 30px 20px;
        background: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
        margin-bottom: 30px;
        animation: headerSlide 1s ease-out 0.5s both;
        position: relative;
        overflow: hidden;
      }

      header::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent
        );
        animation: headerShine 3s ease-in-out infinite;
      }

      @keyframes headerSlide {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes headerShine {
        0% {
          left: -100%;
        }
        50% {
          left: 100%;
        }
        100% {
          left: 100%;
        }
      }

      h1 {
        font-size: 2.5rem;
        font-weight: 700;
        background: linear-gradient(
          135deg,
          var(--accent-primary),
          var(--accent-secondary)
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-bottom: 12px;
        animation: titleGlow 2s ease-in-out infinite alternate;
        text-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
      }

      @keyframes titleGlow {
        from {
          filter: brightness(1);
        }
        to {
          filter: brightness(1.1);
        }
      }

      .subtitle {
        color: var(--text-secondary);
        font-size: 1.1rem;
        font-weight: 500;
        opacity: 0;
        animation: subtitleFade 1s ease-out 0.8s both;
      }

      @keyframes subtitleFade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      /* 播放器区域 */
      .player-section {
        background: var(--bg-primary);
        border-radius: var(--border-radius);
        padding: 20px;
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
        animation: panelSlide 1s ease-out 0.7s both;
        position: relative;
        overflow: hidden;
      }

      .player-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1) 0%,
          transparent 50%,
          rgba(0, 0, 0, 0.05) 100%
        );
        pointer-events: none;
      }

      @keyframes panelSlide {
        from {
          opacity: 0;
          transform: translateX(-30px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      #nplayer {
        border-radius: var(--border-radius-small);
        overflow: hidden;
        height: 500px;
        background: #000;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
        transition: var(--transition);
      }

      #nplayer:hover {
        transform: translateY(-2px);
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light);
      }

      /* 播放列表区域 */
      .playlist-section {
        background: var(--bg-primary);
        border-radius: var(--border-radius);
        padding: 20px;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
        display: flex;
        flex-direction: column;
        height: fit-content;
        max-height: 580px;
        animation: panelSlide 1s ease-out 0.9s both;
        position: relative;
        overflow: hidden;
      }

      .playlist-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.05) 0%,
          transparent 50%,
          rgba(0, 0, 0, 0.02) 100%
        );
        pointer-events: none;
      }
      .playlist-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        position: relative;
        z-index: 1;
      }

      .playlist-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          var(--accent-primary),
          var(--accent-secondary)
        );
        border-radius: 1px;
      }

      .playlist-header h2 {
        color: var(--text-primary);
        font-size: 1.4rem;
        font-weight: 600;
        margin: 0;
      }

      .playlist-controls {
        display: flex;
        gap: 12px;
      }

      .btn {
        background: var(--bg-primary);
        color: var(--text-primary);
        border: none;
        padding: 10px 18px;
        border-radius: var(--border-radius-small);
        cursor: pointer;
        font-weight: 600;
        font-size: 0.9rem;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 4px 4px 8px var(--shadow-dark),
          -4px -4px 8px var(--shadow-light);
        position: relative;
        overflow: hidden;
      }

      .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: left 0.5s ease;
      }

      .btn:hover::before {
        left: 100%;
      }

      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
      }

      .btn:active {
        transform: translateY(0);
        box-shadow: inset 2px 2px 4px var(--shadow-dark),
          inset -2px -2px 4px var(--shadow-light);
      }

      .btn-danger {
        color: var(--danger);
      }

      .btn-danger:hover {
        background: linear-gradient(
          135deg,
          rgba(252, 92, 101, 0.1),
          rgba(252, 92, 101, 0.05)
        );
      }

      .btn-success {
        color: var(--success);
      }

      .btn-success:hover {
        background: linear-gradient(
          135deg,
          rgba(78, 205, 196, 0.1),
          rgba(78, 205, 196, 0.05)
        );
      }

      .btn i {
        font-size: 1.1em;
        transition: var(--transition);
      }

      .btn:hover i {
        transform: scale(1.1);
      }
      #file-input {
        display: none;
      }

      .file-label {
        display: block;
        background: var(--bg-primary);
        color: var(--accent-secondary);
        padding: 12px 20px;
        border-radius: var(--border-radius-small);
        cursor: pointer;
        text-align: center;
        margin-top: 15px;
        transition: var(--transition);
        font-weight: 600;
        box-shadow: 4px 4px 8px var(--shadow-dark),
          -4px -4px 8px var(--shadow-light);
        position: relative;
        overflow: hidden;
        z-index: 1;
      }

      .file-label::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(118, 75, 162, 0.1),
          transparent
        );
        transition: left 0.5s ease;
        z-index: -1;
      }

      .file-label:hover::before {
        left: 100%;
      }

      .file-label:hover {
        transform: translateY(-2px);
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
        background: linear-gradient(
          135deg,
          rgba(118, 75, 162, 0.05),
          rgba(118, 75, 162, 0.02)
        );
      }

      .file-label:active {
        transform: translateY(0);
        box-shadow: inset 2px 2px 4px var(--shadow-dark),
          inset -2px -2px 4px var(--shadow-light);
      }
      /* 播放列表样式 */
      #playlist {
        list-style: none;
        overflow-y: auto;
        max-height: 420px;
        margin-top: 20px;
        padding-right: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--accent-primary) var(--bg-dark);
        position: relative;
        z-index: 1;
      }

      #playlist::-webkit-scrollbar {
        width: 8px;
      }

      #playlist::-webkit-scrollbar-track {
        background: var(--bg-dark);
        border-radius: 4px;
        box-shadow: inset 2px 2px 4px var(--shadow-dark);
      }

      #playlist::-webkit-scrollbar-thumb {
        background: linear-gradient(
          135deg,
          var(--accent-primary),
          var(--accent-secondary)
        );
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      #playlist::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(
          135deg,
          var(--accent-secondary),
          var(--accent-primary)
        );
      }

      #playlist li {
        background: var(--bg-primary);
        padding: 15px 18px;
        margin-bottom: 12px;
        border-radius: var(--border-radius-small);
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: var(--transition);
        box-shadow: 4px 4px 8px var(--shadow-dark),
          -4px -4px 8px var(--shadow-light);
        position: relative;
        overflow: hidden;
        animation: listItemSlide 0.5s ease-out;
        animation-fill-mode: both;
      }

      @keyframes listItemSlide {
        from {
          opacity: 0;
          transform: translateX(-20px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      #playlist li::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent
        );
        transition: left 0.5s ease;
      }

      #playlist li:hover::before {
        left: 100%;
      }

      #playlist li:hover {
        transform: translateX(8px) translateY(-2px);
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
      }

      #playlist li.active {
        background: linear-gradient(
          135deg,
          rgba(78, 205, 196, 0.1),
          rgba(78, 205, 196, 0.05)
        );
        box-shadow: inset 2px 2px 4px rgba(78, 205, 196, 0.2),
          4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
        border-left: 4px solid var(--success);
      }

      #playlist li.active::after {
        content: '';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: var(--success);
        border-radius: 50%;
        animation: activePulse 2s ease-in-out infinite;
      }

      @keyframes activePulse {
        0%,
        100% {
          opacity: 1;
          transform: translateY(-50%) scale(1);
        }
        50% {
          opacity: 0.6;
          transform: translateY(-50%) scale(1.2);
        }
      }
      #playlist li .format-tag {
        background: var(--bg-dark);
        color: var(--accent-primary);
        font-size: 0.75rem;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 12px;
        margin-left: 10px;
        box-shadow: inset 2px 2px 4px var(--shadow-dark),
          inset -2px -2px 4px var(--shadow-light);
        transition: var(--transition);
        position: relative;
        z-index: 1;
      }

      #playlist li .flv-tag {
        color: var(--danger);
        background: linear-gradient(
          135deg,
          rgba(252, 92, 101, 0.1),
          rgba(252, 92, 101, 0.05)
        );
      }

      #playlist li .m3u8-tag {
        color: var(--accent-secondary);
        background: linear-gradient(
          135deg,
          rgba(118, 75, 162, 0.1),
          rgba(118, 75, 162, 0.05)
        );
      }

      #playlist li .dash-tag {
        color: var(--warning);
        background: linear-gradient(
          135deg,
          rgba(247, 183, 49, 0.1),
          rgba(247, 183, 49, 0.05)
        );
      }

      #playlist li .webtorrent-tag {
        color: var(--success);
        background: linear-gradient(
          135deg,
          rgba(78, 205, 196, 0.1),
          rgba(78, 205, 196, 0.05)
        );
      }

      .video-info {
        flex-grow: 1;
        overflow: hidden;
        margin-right: 15px;
        position: relative;
        z-index: 1;
      }

      .video-info .title {
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 6px;
        transition: var(--transition);
      }

      #playlist li:hover .video-info .title {
        color: var(--accent-primary);
      }

      .video-info .url {
        font-size: 0.8rem;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: var(--transition);
      }

      .checkbox {
        margin-right: 15px;
        position: relative;
        z-index: 1;
      }

      .checkbox input[type='checkbox'] {
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        background: var(--bg-primary);
        box-shadow: inset 2px 2px 4px var(--shadow-dark),
          inset -2px -2px 4px var(--shadow-light);
        cursor: pointer;
        transition: var(--transition);
        position: relative;
      }

      .checkbox input[type='checkbox']:checked {
        background: linear-gradient(
          135deg,
          var(--success),
          rgba(78, 205, 196, 0.8)
        );
        box-shadow: 2px 2px 4px var(--shadow-dark),
          -2px -2px 4px var(--shadow-light);
      }

      .checkbox input[type='checkbox']:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 12px;
        font-weight: bold;
      }
      /* 响应式设计 */
      @media (max-width: 900px) {
        .container {
          grid-template-columns: 1fr;
          gap: 20px;
        }
        #nplayer {
          height: 400px;
        }
        .playlist-section {
          max-height: 500px;
        }
      }

      @media (max-width: 500px) {
        body {
          padding: 15px;
        }
        #nplayer {
          height: 300px;
        }
        .btn-text {
          display: none;
        }
        .btn i {
          margin-right: 0;
        }
        .playlist-controls {
          gap: 8px;
        }
        .btn {
          padding: 8px 12px;
        }
      }

      /* 格式支持提示 */
      .format-info {
        background: var(--bg-primary);
        padding: 20px;
        border-radius: var(--border-radius);
        margin-top: 30px;
        grid-column: 1 / -1;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
        animation: panelSlide 1s ease-out 1.1s both;
        position: relative;
        overflow: hidden;
      }

      .format-info::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.05) 0%,
          transparent 50%,
          rgba(0, 0, 0, 0.02) 100%
        );
        pointer-events: none;
      }

      .format-info h3 {
        color: var(--text-primary);
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 15px;
        position: relative;
        z-index: 1;
      }

      .format-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        position: relative;
        z-index: 1;
      }

      .format-badge {
        background: var(--bg-primary);
        color: var(--text-primary);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        box-shadow: 4px 4px 8px var(--shadow-dark),
          -4px -4px 8px var(--shadow-light);
        transition: var(--transition);
        cursor: default;
      }

      .format-badge:hover {
        transform: translateY(-2px);
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
      }

      .format-badge.flv {
        color: var(--danger);
        background: linear-gradient(
          135deg,
          rgba(252, 92, 101, 0.1),
          rgba(252, 92, 101, 0.05)
        );
      }

      .format-badge.m3u8 {
        color: var(--accent-secondary);
        background: linear-gradient(
          135deg,
          rgba(118, 75, 162, 0.1),
          rgba(118, 75, 162, 0.05)
        );
      }

      .format-badge.dash {
        color: var(--warning);
        background: linear-gradient(
          135deg,
          rgba(247, 183, 49, 0.1),
          rgba(247, 183, 49, 0.05)
        );
      }

      .format-badge.webtorrent {
        color: var(--success);
        background: linear-gradient(
          135deg,
          rgba(78, 205, 196, 0.1),
          rgba(78, 205, 196, 0.05)
        );
      }
      .footer {
        grid-column: 1 / -1;
        text-align: center;
        padding: 25px 20px;
        color: var(--text-muted);
        font-size: 0.9rem;
        margin-top: 30px;
        background: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: inset 4px 4px 8px var(--shadow-dark),
          inset -4px -4px 8px var(--shadow-light);
        animation: panelSlide 1s ease-out 1.3s both;
        position: relative;
        overflow: hidden;
      }

      .footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.02) 0%,
          transparent 50%,
          rgba(0, 0, 0, 0.01) 100%
        );
        pointer-events: none;
      }

      /* 状态提示 */
      .status-indicator {
        display: flex;
        align-items: center;
        margin-top: 15px;
        padding: 10px 15px;
        background: var(--bg-dark);
        border-radius: var(--border-radius-small);
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-secondary);
        box-shadow: inset 3px 3px 6px var(--shadow-dark),
          inset -3px -3px 6px var(--shadow-light);
        position: relative;
        z-index: 1;
      }

      .status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 10px;
        position: relative;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      .status-dot.connecting {
        background: linear-gradient(
          135deg,
          var(--warning),
          rgba(247, 183, 49, 0.8)
        );
        animation: statusPulse 1.5s ease-in-out infinite;
      }

      .status-dot.connecting::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 50%;
        background: var(--warning);
        opacity: 0.3;
        animation: statusRipple 1.5s ease-in-out infinite;
      }

      .status-dot.playing {
        background: linear-gradient(
          135deg,
          var(--success),
          rgba(78, 205, 196, 0.8)
        );
        animation: statusGlow 2s ease-in-out infinite alternate;
      }

      .status-dot.error {
        background: linear-gradient(
          135deg,
          var(--danger),
          rgba(252, 92, 101, 0.8)
        );
        animation: statusShake 0.5s ease-in-out;
      }

      @keyframes statusPulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.7;
          transform: scale(1.1);
        }
      }

      @keyframes statusRipple {
        0% {
          transform: scale(1);
          opacity: 0.3;
        }
        100% {
          transform: scale(1.5);
          opacity: 0;
        }
      }

      @keyframes statusGlow {
        from {
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
            0 0 8px rgba(78, 205, 196, 0.3);
        }
        to {
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
            0 0 16px rgba(78, 205, 196, 0.6);
        }
      }

      @keyframes statusShake {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-2px);
        }
        75% {
          transform: translateX(2px);
        }
      }
    </style>
  </head>
  <body>
    <div id="customModal" class="custom-modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">添加视频</h3>
          <span class="close-modal">&times;</span>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <label for="videoUrl">视频URL</label>
            <input type="text" id="videoUrl" placeholder="请输入视频URL" />
          </div>
          <div class="input-group">
            <label for="videoTitle">视频标题</label>
            <input
              type="text"
              id="videoTitle"
              placeholder="请输入视频标题（默认：我的视频）"
            />
          </div>
        </div>
        <div class="modal-footer">
          <button class="modal-btn cancel">取消</button>
          <button class="modal-btn confirm">确认</button>
        </div>
      </div>
    </div>
    <div class="container">
      <header>
        <h1>多功能视频播放器</h1>
        <p class="subtitle">支持多选、M3U8直播、FLV流媒体及主流视频格式</p>
      </header>

      <!-- 播放器区域 -->
      <section class="player-section">
        <div id="nplayer"></div>
        <div class="status-indicator">
          <div class="status-dot" id="status-dot"></div>
          <span id="status-text">就绪</span>
        </div>
      </section>

      <!-- 播放列表区域 -->
      <section class="playlist-section">
        <div class="playlist-header">
          <h2>播放列表</h2>
          <div class="playlist-controls">
            <button class="btn btn-success" id="add-url">
              <i>+</i><span class="btn-text">添加URL</span>
            </button>
            <button class="btn btn-danger" id="remove-selected">
              <i>×</i><span class="btn-text">删除选中</span>
            </button>
          </div>
        </div>

        <input
          type="file"
          id="file-input"
          multiple
          accept=".mp4,.webm,.ogg,.ogv,.flv,.m3u8,.ts,.mpd,.m4s,.torrent,.avi,.mkv,.mov,.wmv,video/*"
        />
        <label for="file-input" class="file-label">
          <i>📁</i> 选择本地视频文件
        </label>

        <ul id="playlist"></ul>
      </section>

      <!-- 格式支持信息 -->
      <div class="format-info">
        <h3>支持格式</h3>
        <div class="format-list">
          <span class="format-badge">MP4</span>
          <span class="format-badge">WebM</span>
          <span class="format-badge m3u8">M3U8/HLS</span>
          <span class="format-badge flv">FLV</span>
          <span class="format-badge dash">MPEG-DASH</span>
          <span class="format-badge">OGG</span>
          <span class="format-badge webtorrent">WebTorrent</span>
        </div>
      </div>

      <div class="footer">
        <p>
          基于 NPlayer + flv.js + hls.js + dash.js + WebTorrent 技术构建 |
          支持多格式流媒体播放
        </p>
      </div>
    </div>

    <script>
      // 等待DOM加载完成后初始化播放器
      document.addEventListener('DOMContentLoaded', function () {
        // 检查NPlayer是否加载成功
        if (typeof NPlayer === 'undefined') {
          console.error('NPlayer未加载成功，请检查网络连接')
          updateStatus('播放器加载失败', 'error')
          return
        }
        function createIcon(html, noCls) {
          const div = document.createElement('div')
          div.innerHTML = html
          if (!noCls) div.classList.add('nplayer_icon')
          return (cls) => {
            if (cls) {
              div.classList.add(cls)
            }
            return div
          }
        }

        const play = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="28" height="28" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_153"><rect width="28" height="28" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_153)"><g transform="matrix(0.2747209668159485,0,0,0.2747209668159485,20.91462516784668,14.090660095214844)" opacity="0.019381329530385613" style="display: none;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path></g></g><g transform="matrix(0.7176067233085632,0,0,0.7176067233085632,22.7425537109375,14)" opacity="0.0618618270600345" style="display: none;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path></g></g><g style="display: block;" transform="matrix(1,0,0,1,14,14)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d="M0 0"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path></g><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-7.031000137329102,-10.875 C-7.031000137329102,-10.875 -8.32800006866455,-11.25 -9.42199993133545,-10.468999862670898 C-10.109999656677246,-9.906999588012695 -10,-7.992000102996826 -10,-7.992000102996826 C-10,-7.992000102996826 -10,8.015999794006348 -10,8.015999794006348 C-10,8.015999794006348 -10.125,10.241999626159668 -9,10.991999626159668 C-7.875,11.741999626159668 -5,10.031000137329102 -5,10.031000137329102 C-5,10.031000137329102 7.968999862670898,1.875 7.968999862670898,1.875 C7.968999862670898,1.875 9,1.062000036239624 9,0 C9,-1.062000036239624 7.968999862670898,-1.937999963760376 7.968999862670898,-1.937999963760376 C7.968999862670898,-1.937999963760376 -7.031000137329102,-10.875 -7.031000137329102,-10.875z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M-7.031000137329102,-10.875 C-7.031000137329102,-10.875 -8.32800006866455,-11.25 -9.42199993133545,-10.468999862670898 C-10.109999656677246,-9.906999588012695 -10,-7.992000102996826 -10,-7.992000102996826 C-10,-7.992000102996826 -10,8.015999794006348 -10,8.015999794006348 C-10,8.015999794006348 -10.125,10.241999626159668 -9,10.991999626159668 C-7.875,11.741999626159668 -5,10.031000137329102 -5,10.031000137329102 C-5,10.031000137329102 7.968999862670898,1.875 7.968999862670898,1.875 C7.968999862670898,1.875 9,1.062000036239624 9,0 C9,-1.062000036239624 7.968999862670898,-1.937999963760376 7.968999862670898,-1.937999963760376 C7.968999862670898,-1.937999963760376 -7.031000137329102,-10.875 -7.031000137329102,-10.875z"></path></g></g></g></svg>`
        const volume = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" width="88" height="88" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_195"><rect width="88" height="88" x="0" y="0"></rect></clipPath><clipPath id="__lottie_element_197"><path d="M0,0 L88,0 L88,88 L0,88z"></path></clipPath></defs><g clip-path="url(#__lottie_element_195)"><g clip-path="url(#__lottie_element_197)" transform="matrix(1,0,0,1,0,0)" opacity="1" style="display: block;"><g transform="matrix(1,0,0,1,28,44)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M15.5600004196167,-25.089000701904297 C15.850000381469727,-24.729000091552734 16,-24.288999557495117 16,-23.839000701904297 C16,-23.839000701904297 16,23.840999603271484 16,23.840999603271484 C16,24.94099998474121 15.100000381469727,25.840999603271484 14,25.840999603271484 C13.550000190734863,25.840999603271484 13.109999656677246,25.680999755859375 12.75,25.400999069213867 C12.75,25.400999069213867 -4,12.00100040435791 -4,12.00100040435791 C-4,12.00100040435791 -8,12.00100040435791 -8,12.00100040435791 C-12.420000076293945,12.00100040435791 -16,8.420999526977539 -16,4.000999927520752 C-16,4.000999927520752 -16,-3.999000072479248 -16,-3.999000072479248 C-16,-8.418999671936035 -12.420000076293945,-11.99899959564209 -8,-11.99899959564209 C-8,-11.99899959564209 -4,-11.99899959564209 -4,-11.99899959564209 C-4,-11.99899959564209 12.75,-25.39900016784668 12.75,-25.39900016784668 C13.609999656677246,-26.089000701904297 14.869999885559082,-25.948999404907227 15.5600004196167,-25.089000701904297z"></path></g></g><g style="display: none;" transform="matrix(1.005582571029663,0,0,1.005582571029663,56.00732421875,44.0004997253418)" opacity="0.03466278523664528"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-4,-13.859000205993652 C0.7799999713897705,-11.08899974822998 4,-5.919000148773193 4,0.0010000000474974513 C4,5.921000003814697 0.7799999713897705,11.090999603271484 -4,13.861000061035156 C-4,13.861000061035156 -4,-13.859000205993652 -4,-13.859000205993652z"></path></g></g><g style="display: none;" transform="matrix(1.012650966644287,0,0,1.012650966644287,64.37825012207031,44.0057487487793)" opacity="0.10899581134639974"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-6.236000061035156,-28.895999908447266 C4.803999900817871,-23.615999221801758 11.984000205993652,-12.456000328063965 11.984000205993652,-0.006000000052154064 C11.984000205993652,12.454000473022461 4.794000148773193,23.624000549316406 -6.265999794006348,28.893999099731445 C-8.255999565124512,29.8439998626709 -10.645999908447266,29.003999710083008 -11.595999717712402,27.003999710083008 C-12.545999526977539,25.013999938964844 -11.696000099182129,22.624000549316406 -9.706000328063965,21.673999786376953 C-1.406000018119812,17.724000930786133 3.9839999675750732,9.343999862670898 3.9839999675750732,-0.006000000052154064 C3.9839999675750732,-9.345999717712402 -1.3960000276565552,-17.715999603271484 -9.675999641418457,-21.676000595092773 C-11.675999641418457,-22.625999450683594 -12.515999794006348,-25.016000747680664 -11.565999984741211,-27.006000518798828 C-10.616000175476074,-29.006000518798828 -8.22599983215332,-29.84600067138672 -6.236000061035156,-28.895999908447266z"></path></g></g><g style="display: none;" transform="matrix(1.0002110004425049,0,0,1.0002110004425049,56.00299835205078,44)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-4,-13.859000205993652 C0.7799999713897705,-11.08899974822998 4,-5.919000148773193 4,0.0010000000474974513 C4,5.921000003814697 0.7799999713897705,11.090999603271484 -4,13.861000061035156 C-4,13.861000061035156 -4,-13.859000205993652 -4,-13.859000205993652z"></path></g></g><g style="display: none;" transform="matrix(1.000206470489502,0,0,1.000206470489502,64.00399780273438,44.00699996948242)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-6.236000061035156,-28.895999908447266 C4.803999900817871,-23.615999221801758 11.984000205993652,-12.456000328063965 11.984000205993652,-0.006000000052154064 C11.984000205993652,12.454000473022461 4.794000148773193,23.624000549316406 -6.265999794006348,28.893999099731445 C-8.255999565124512,29.8439998626709 -10.645999908447266,29.003999710083008 -11.595999717712402,27.003999710083008 C-12.545999526977539,25.013999938964844 -11.696000099182129,22.624000549316406 -9.706000328063965,21.673999786376953 C-1.406000018119812,17.724000930786133 3.9839999675750732,9.343999862670898 3.9839999675750732,-0.006000000052154064 C3.9839999675750732,-9.345999717712402 -1.3960000276565552,-17.715999603271484 -9.675999641418457,-21.676000595092773 C-11.675999641418457,-22.625999450683594 -12.515999794006348,-25.016000747680664 -11.565999984741211,-27.006000518798828 C-10.616000175476074,-29.006000518798828 -8.22599983215332,-29.84600067138672 -6.236000061035156,-28.895999908447266z"></path></g></g><g transform="matrix(1,0,0,1,56,44)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-4,-13.859000205993652 C0.7799999713897705,-11.08899974822998 4,-5.919000148773193 4,0.0010000000474974513 C4,5.921000003814697 0.7799999713897705,11.090999603271484 -4,13.861000061035156 C-4,13.861000061035156 -4,-13.859000205993652 -4,-13.859000205993652z"></path></g></g><g transform="matrix(1,0,0,1,64.01399993896484,44.00699996948242)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-6.236000061035156,-28.895999908447266 C4.803999900817871,-23.615999221801758 11.984000205993652,-12.456000328063965 11.984000205993652,-0.006000000052154064 C11.984000205993652,12.454000473022461 4.794000148773193,23.624000549316406 -6.265999794006348,28.893999099731445 C-8.255999565124512,29.8439998626709 -10.645999908447266,29.003999710083008 -11.595999717712402,27.003999710083008 C-12.545999526977539,25.013999938964844 -11.696000099182129,22.624000549316406 -9.706000328063965,21.673999786376953 C-1.406000018119812,17.724000930786133 3.9839999675750732,9.343999862670898 3.9839999675750732,-0.006000000052154064 C3.9839999675750732,-9.345999717712402 -1.3960000276565552,-17.715999603271484 -9.675999641418457,-21.676000595092773 C-11.675999641418457,-22.625999450683594 -12.515999794006348,-25.016000747680664 -11.565999984741211,-27.006000518798828 C-10.616000175476074,-29.006000518798828 -8.22599983215332,-29.84600067138672 -6.236000061035156,-28.895999908447266z"></path></g></g></g></g></svg>`
        const cog = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" width="88" height="88" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_263"><rect width="88" height="88" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_263)"><g transform="matrix(1,0,0,1,44,43.875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M0,8.125 C-4.420000076293945,8.125 -8,4.545000076293945 -8,0.125 C-8,-4.295000076293945 -4.420000076293945,-7.875 0,-7.875 C4.420000076293945,-7.875 8,-4.295000076293945 8,0.125 C8,4.545000076293945 4.420000076293945,8.125 0,8.125z M0,16.125 C8.84000015258789,16.125 16,8.96500015258789 16,0.125 C16,-8.71500015258789 8.84000015258789,-15.875 0,-15.875 C-8.84000015258789,-15.875 -16,-8.71500015258789 -16,0.125 C-16,8.96500015258789 -8.84000015258789,16.125 0,16.125z M4.539999961853027,27.51099967956543 C3.059999942779541,27.750999450683594 1.5499999523162842,27.871000289916992 0,27.871000289916992 C-1.5499999523162842,27.871000289916992 -3.059999942779541,27.750999450683594 -4.539999961853027,27.51099967956543 C-4.539999961853027,27.51099967956543 -8.699999809265137,32.56100082397461 -8.699999809265137,32.56100082397461 C-9.9399995803833,34.07099914550781 -12.100000381469727,34.46099853515625 -13.789999961853027,33.48099899291992 C-13.789999961853027,33.48099899291992 -21.780000686645508,28.871000289916992 -21.780000686645508,28.871000289916992 C-23.469999313354492,27.891000747680664 -24.209999084472656,25.83099937438965 -23.520000457763672,24.000999450683594 C-23.520000457763672,24.000999450683594 -21.290000915527344,18.06100082397461 -21.290000915527344,18.06100082397461 C-23.3799991607666,15.621000289916992 -25.049999237060547,12.810999870300293 -26.209999084472656,9.76099967956543 C-26.209999084472656,9.76099967956543 -32.65999984741211,8.680999755859375 -32.65999984741211,8.680999755859375 C-34.59000015258789,8.361000061035156 -36,6.690999984741211 -36,4.741000175476074 C-36,4.741000175476074 -36,-4.488999843597412 -36,-4.488999843597412 C-36,-6.439000129699707 -34.59000015258789,-8.109000205993652 -32.65999984741211,-8.428999900817871 C-32.65999984741211,-8.428999900817871 -26.399999618530273,-9.479000091552734 -26.399999618530273,-9.479000091552734 C-25.309999465942383,-12.559000015258789 -23.690000534057617,-15.388999938964844 -21.65999984741211,-17.868999481201172 C-21.65999984741211,-17.868999481201172 -23.959999084472656,-23.999000549316406 -23.959999084472656,-23.999000549316406 C-24.639999389648438,-25.839000701904297 -23.899999618530273,-27.888999938964844 -22.209999084472656,-28.868999481201172 C-22.209999084472656,-28.868999481201172 -14.220000267028809,-33.479000091552734 -14.220000267028809,-33.479000091552734 C-12.529999732971191,-34.45899963378906 -10.380000114440918,-34.069000244140625 -9.130000114440918,-32.558998107910156 C-9.130000114440918,-32.558998107910156 -5.099999904632568,-27.659000396728516 -5.099999904632568,-27.659000396728516 C-3.450000047683716,-27.9689998626709 -1.7400000095367432,-28.128999710083008 0,-28.128999710083008 C1.7400000095367432,-28.128999710083008 3.450000047683716,-27.9689998626709 5.099999904632568,-27.659000396728516 C5.099999904632568,-27.659000396728516 9.130000114440918,-32.558998107910156 9.130000114440918,-32.558998107910156 C10.380000114440918,-34.069000244140625 12.529999732971191,-34.45899963378906 14.220000267028809,-33.479000091552734 C14.220000267028809,-33.479000091552734 22.209999084472656,-28.868999481201172 22.209999084472656,-28.868999481201172 C23.899999618530273,-27.888999938964844 24.639999389648438,-25.839000701904297 23.959999084472656,-23.999000549316406 C23.959999084472656,-23.999000549316406 21.65999984741211,-17.868999481201172 21.65999984741211,-17.868999481201172 C23.690000534057617,-15.388999938964844 25.309999465942383,-12.559000015258789 26.399999618530273,-9.479000091552734 C26.399999618530273,-9.479000091552734 32.65999984741211,-8.428999900817871 32.65999984741211,-8.428999900817871 C34.59000015258789,-8.109000205993652 36,-6.439000129699707 36,-4.488999843597412 C36,-4.488999843597412 36,4.741000175476074 36,4.741000175476074 C36,6.690999984741211 34.59000015258789,8.361000061035156 32.65999984741211,8.680999755859375 C32.65999984741211,8.680999755859375 26.209999084472656,9.76099967956543 26.209999084472656,9.76099967956543 C25.049999237060547,12.810999870300293 23.3799991607666,15.621000289916992 21.290000915527344,18.06100082397461 C21.290000915527344,18.06100082397461 23.520000457763672,24.000999450683594 23.520000457763672,24.000999450683594 C24.209999084472656,25.83099937438965 23.469999313354492,27.891000747680664 21.780000686645508,28.871000289916992 C21.780000686645508,28.871000289916992 13.789999961853027,33.48099899291992 13.789999961853027,33.48099899291992 C12.100000381469727,34.46099853515625 9.9399995803833,34.07099914550781 8.699999809265137,32.56100082397461 C8.699999809265137,32.56100082397461 4.539999961853027,27.51099967956543 4.539999961853027,27.51099967956543z"></path></g></g></g></svg>`
        const webFull = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" width="88" height="88" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_174"><rect width="88" height="88" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_174)"><g transform="matrix(1,0,0,1,44,44)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-14,-20 C-14,-20 -26,-20 -26,-20 C-27.049999237060547,-20 -27.920000076293945,-19.18000030517578 -27.989999771118164,-18.149999618530273 C-27.989999771118164,-18.149999618530273 -28,-18 -28,-18 C-28,-18 -28,-6 -28,-6 C-28,-4.949999809265137 -27.18000030517578,-4.079999923706055 -26.149999618530273,-4.010000228881836 C-26.149999618530273,-4.010000228881836 -26,-4 -26,-4 C-26,-4 -22,-4 -22,-4 C-20.950000762939453,-4 -20.079999923706055,-4.820000171661377 -20.010000228881836,-5.849999904632568 C-20.010000228881836,-5.849999904632568 -20,-6 -20,-6 C-20,-6 -20,-12 -20,-12 C-20,-12 -14,-12 -14,-12 C-12.949999809265137,-12 -12.079999923706055,-12.819999694824219 -12.010000228881836,-13.850000381469727 C-12.010000228881836,-13.850000381469727 -12,-14 -12,-14 C-12,-14 -12,-18 -12,-18 C-12,-19.049999237060547 -12.819999694824219,-19.920000076293945 -13.850000381469727,-19.989999771118164 C-13.850000381469727,-19.989999771118164 -14,-20 -14,-20z M26,-20 C26,-20 14,-20 14,-20 C12.949999809265137,-20 12.079999923706055,-19.18000030517578 12.010000228881836,-18.149999618530273 C12.010000228881836,-18.149999618530273 12,-18 12,-18 C12,-18 12,-14 12,-14 C12,-12.949999809265137 12.819999694824219,-12.079999923706055 13.850000381469727,-12.010000228881836 C13.850000381469727,-12.010000228881836 14,-12 14,-12 C14,-12 20,-12 20,-12 C20,-12 20,-6 20,-6 C20,-4.949999809265137 20.81999969482422,-4.079999923706055 21.850000381469727,-4.010000228881836 C21.850000381469727,-4.010000228881836 22,-4 22,-4 C22,-4 26,-4 26,-4 C27.049999237060547,-4 27.920000076293945,-4.820000171661377 27.989999771118164,-5.849999904632568 C27.989999771118164,-5.849999904632568 28,-6 28,-6 C28,-6 28,-18 28,-18 C28,-19.049999237060547 27.18000030517578,-19.920000076293945 26.149999618530273,-19.989999771118164 C26.149999618530273,-19.989999771118164 26,-20 26,-20z M-22,4 C-22,4 -26,4 -26,4 C-27.049999237060547,4 -27.920000076293945,4.820000171661377 -27.989999771118164,5.849999904632568 C-27.989999771118164,5.849999904632568 -28,6 -28,6 C-28,6 -28,18 -28,18 C-28,19.049999237060547 -27.18000030517578,19.920000076293945 -26.149999618530273,19.989999771118164 C-26.149999618530273,19.989999771118164 -26,20 -26,20 C-26,20 -14,20 -14,20 C-12.949999809265137,20 -12.079999923706055,19.18000030517578 -12.010000228881836,18.149999618530273 C-12.010000228881836,18.149999618530273 -12,18 -12,18 C-12,18 -12,14 -12,14 C-12,12.949999809265137 -12.819999694824219,12.079999923706055 -13.850000381469727,12.010000228881836 C-13.850000381469727,12.010000228881836 -14,12 -14,12 C-14,12 -20,12 -20,12 C-20,12 -20,6 -20,6 C-20,4.949999809265137 -20.81999969482422,4.079999923706055 -21.850000381469727,4.010000228881836 C-21.850000381469727,4.010000228881836 -22,4 -22,4z M26,4 C26,4 22,4 22,4 C20.950000762939453,4 20.079999923706055,4.820000171661377 20.010000228881836,5.849999904632568 C20.010000228881836,5.849999904632568 20,6 20,6 C20,6 20,12 20,12 C20,12 14,12 14,12 C12.949999809265137,12 12.079999923706055,12.819999694824219 12.010000228881836,13.850000381469727 C12.010000228881836,13.850000381469727 12,14 12,14 C12,14 12,18 12,18 C12,19.049999237060547 12.819999694824219,19.920000076293945 13.850000381469727,19.989999771118164 C13.850000381469727,19.989999771118164 14,20 14,20 C14,20 26,20 26,20 C27.049999237060547,20 27.920000076293945,19.18000030517578 27.989999771118164,18.149999618530273 C27.989999771118164,18.149999618530273 28,18 28,18 C28,18 28,6 28,6 C28,4.949999809265137 27.18000030517578,4.079999923706055 26.149999618530273,4.010000228881836 C26.149999618530273,4.010000228881836 26,4 26,4z M28,-28 C32.41999816894531,-28 36,-24.420000076293945 36,-20 C36,-20 36,20 36,20 C36,24.420000076293945 32.41999816894531,28 28,28 C28,28 -28,28 -28,28 C-32.41999816894531,28 -36,24.420000076293945 -36,20 C-36,20 -36,-20 -36,-20 C-36,-24.420000076293945 -32.41999816894531,-28 -28,-28 C-28,-28 28,-28 28,-28z"></path></g></g></g></svg>`
        const full = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" width="88" height="88" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);"><defs><clipPath id="__lottie_element_291"><rect width="88" height="88" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_291)"><g transform="matrix(1,0,0,1,44,74.22000122070312)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M19.219999313354492,0.2199999988079071 C7.480000019073486,7.630000114440918 -7.480000019073486,7.630000114440918 -19.219999313354492,0.2199999988079071 C-19.219999313354492,0.2199999988079071 -16.219999313354492,-5.78000020980835 -16.219999313354492,-5.78000020980835 C-6.389999866485596,0.75 6.409999847412109,0.75 16.239999771118164,-5.78000020980835 C16.239999771118164,-5.78000020980835 19.219999313354492,0.2199999988079071 19.219999313354492,0.2199999988079071z"></path></g></g><g transform="matrix(1,0,0,1,68.58000183105469,27.895000457763672)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M11.420000076293945,16.104999542236328 C11.420000076293945,16.104999542236328 4.78000020980835,16.104999542236328 4.78000020980835,16.104999542236328 C4.78000020980835,16.104999542236328 4.78000020980835,14.635000228881836 4.78000020980835,14.635000228881836 C4.25,4.054999828338623 -1.940000057220459,-5.425000190734863 -11.420000076293945,-10.164999961853027 C-11.420000076293945,-10.164999961853027 -8.479999542236328,-16.104999542236328 -8.479999542236328,-16.104999542236328 C3.7200000286102295,-10.005000114440918 11.420000076293945,2.4649999141693115 11.420000076293945,16.104999542236328 C11.420000076293945,16.104999542236328 11.420000076293945,16.104999542236328 11.420000076293945,16.104999542236328z"></path></g></g><g transform="matrix(1,0,0,1,19.450000762939453,27.895000457763672)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-4.809999942779541,16.104999542236328 C-4.809999942779541,16.104999542236328 -11.449999809265137,16.104999542236328 -11.449999809265137,16.104999542236328 C-11.449999809265137,2.4649999141693115 -3.75,-10.005000114440918 8.449999809265137,-16.104999542236328 C8.449999809265137,-16.104999542236328 11.449999809265137,-10.164999961853027 11.449999809265137,-10.164999961853027 C1.4900000095367432,-5.204999923706055 -4.809999942779541,4.974999904632568 -4.809999942779541,16.104999542236328 C-4.809999942779541,16.104999542236328 -4.809999942779541,16.104999542236328 -4.809999942779541,16.104999542236328z"></path></g></g><g transform="matrix(1,0,0,1,44.0099983215332,65.96499633789062)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-0.009999999776482582,5.34499979019165 C-5.46999979019165,5.355000019073486 -10.800000190734863,3.7149999141693115 -15.319999694824219,0.6549999713897705 C-15.319999694824219,0.6549999713897705 -12.319999694824219,-5.34499979019165 -12.319999694824219,-5.34499979019165 C-5,0.08500000089406967 5,0.08500000089406967 12.319999694824219,-5.34499979019165 C12.319999694824219,-5.34499979019165 15.319999694824219,0.6549999713897705 15.319999694824219,0.6549999713897705 C10.800000190734863,3.7249999046325684 5.460000038146973,5.355000019073486 -0.009999999776482582,5.34499979019165z"></path></g></g><g transform="matrix(1,0,0,1,62.275001525878906,31.780000686645508)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M9.015000343322754,10.850000381469727 C9.015000343322754,10.850000381469727 9.015000343322754,12.220000267028809 9.015000343322754,12.220000267028809 C9.015000343322754,12.220000267028809 2.434999942779541,12.220000267028809 2.434999942779541,12.220000267028809 C2.434999942779541,12.220000267028809 2.434999942779541,11.220000267028809 2.434999942779541,11.220000267028809 C2.075000047683716,3.740000009536743 -2.305000066757202,-2.9700000286102295 -9.015000343322754,-6.309999942779541 C-9.015000343322754,-6.309999942779541 -6.014999866485596,-12.220000267028809 -6.014999866485596,-12.220000267028809 C-6.014999866485596,-12.220000267028809 -6.014999866485596,-12.220000267028809 -6.014999866485596,-12.220000267028809 C2.7850000858306885,-7.800000190734863 8.524999618530273,1.0099999904632568 9.015000343322754,10.850000381469727 C9.015000343322754,10.850000381469727 9.015000343322754,10.850000381469727 9.015000343322754,10.850000381469727z"></path></g></g><g transform="matrix(1,0,0,1,25.729999542236328,31.780000686645508)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-2.440000057220459,12.220000267028809 C-2.440000057220459,12.220000267028809 -9.050000190734863,12.220000267028809 -9.050000190734863,12.220000267028809 C-9.050000190734863,1.8700000047683716 -3.2100000381469727,-7.590000152587891 6.050000190734863,-12.220000267028809 C6.050000190734863,-12.220000267028809 9.050000190734863,-6.309999942779541 9.050000190734863,-6.309999942779541 C2.0199999809265137,-2.809999942779541 -2.430000066757202,4.360000133514404 -2.440000057220459,12.220000267028809 C-2.440000057220459,12.220000267028809 -2.440000057220459,12.220000267028809 -2.440000057220459,12.220000267028809z"></path></g></g><g transform="matrix(1,0,0,1,44,57.654998779296875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M0,4.974999904632568 C-4.110000133514404,4.994999885559082 -8.119999885559082,3.6449999809265137 -11.380000114440918,1.1349999904632568 C-11.380000114440918,1.1349999904632568 -8.319999694824219,-4.974999904632568 -8.319999694824219,-4.974999904632568 C-3.6700000762939453,-0.5049999952316284 3.6700000762939453,-0.5049999952316284 8.319999694824219,-4.974999904632568 C8.319999694824219,-4.974999904632568 11.380000114440918,1.1349999904632568 11.380000114440918,1.1349999904632568 C8.109999656677246,3.634999990463257 4.110000133514404,4.985000133514404 0,4.974999904632568 C0,4.974999904632568 0,4.974999904632568 0,4.974999904632568z"></path></g></g><g transform="matrix(1,0,0,1,55.9900016784668,35.665000915527344)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M6.619999885559082,7.40500020980835 C6.619999885559082,7.40500020980835 6.619999885559082,8.335000038146973 6.619999885559082,8.335000038146973 C6.619999885559082,8.335000038146973 0.009999999776482582,8.335000038146973 0.009999999776482582,8.335000038146973 C0.009999999776482582,3.7850000858306885 -2.549999952316284,-0.375 -6.619999885559082,-2.4049999713897705 C-6.619999885559082,-2.4049999713897705 -3.619999885559082,-8.335000038146973 -3.619999885559082,-8.335000038146973 C2.380000114440918,-5.324999809265137 6.300000190734863,0.6949999928474426 6.619999885559082,7.40500020980835 C6.619999885559082,7.40500020980835 6.619999885559082,7.40500020980835 6.619999885559082,7.40500020980835z"></path></g></g><g transform="matrix(1,0,0,1,31.9950008392334,35.665000915527344)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M6.635000228881836,-2.4049999713897705 C2.565000057220459,-0.375 0.004999999888241291,3.7850000858306885 0.004999999888241291,8.335000038146973 C0.004999999888241291,8.335000038146973 -6.635000228881836,8.335000038146973 -6.635000228881836,8.335000038146973 C-6.635000228881836,1.274999976158142 -2.6449999809265137,-5.184999942779541 3.674999952316284,-8.335000038146973 C3.674999952316284,-8.335000038146973 6.635000228881836,-2.4049999713897705 6.635000228881836,-2.4049999713897705z"></path></g></g><g transform="matrix(1,0,0,1,44,66.322998046875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M8.319000244140625,-13.677000045776367 C8.319000244140625,-13.677000045776367 19.2189998626709,8.123000144958496 19.2189998626709,8.123000144958496 C13.659000396728516,11.642999649047852 7.068999767303467,13.67300033569336 -0.0010000000474974513,13.67300033569336 C-7.071000099182129,13.67300033569336 -13.66100025177002,11.642999649047852 -19.22100067138672,8.123000144958496 C-19.22100067138672,8.123000144958496 -8.321000099182129,-13.677000045776367 -8.321000099182129,-13.677000045776367 C-6.160999774932861,-11.597000122070312 -3.2309999465942383,-10.32699966430664 -0.0010000000474974513,-10.32699966430664 C3.2290000915527344,-10.32699966430664 6.169000148773193,-11.597000122070312 8.319000244140625,-13.677000045776367z"></path></g></g><g transform="matrix(1,0,0,1,64.68399810791016,27.89699935913086)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M15.314000129699707,16.10700035095215 C15.314000129699707,16.10700035095215 -8.685999870300293,16.10700035095215 -8.685999870300293,16.10700035095215 C-8.685999870300293,11.406999588012695 -11.38599967956543,7.336999893188477 -15.315999984741211,5.367000102996826 C-15.315999984741211,5.367000102996826 -4.576000213623047,-16.10300064086914 -4.576000213623047,-16.10300064086914 C7.214000225067139,-10.192999839782715 15.314000129699707,2.006999969482422 15.314000129699707,16.10700035095215z"></path></g></g><g transform="matrix(1,0,0,1,23.31599998474121,27.89699935913086)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M4.584000110626221,-16.10300064086914 C4.584000110626221,-16.10300064086914 15.314000129699707,5.367000102996826 15.314000129699707,5.367000102996826 C11.383999824523926,7.336999893188477 8.684000015258789,11.406999588012695 8.684000015258789,16.10700035095215 C8.684000015258789,16.10700035095215 -15.315999984741211,16.10700035095215 -15.315999984741211,16.10700035095215 C-15.315999984741211,2.006999969482422 -7.216000080108643,-10.192999839782715 4.584000110626221,-16.10300064086914z"></path></g></g><g transform="matrix(1,0,0,1,44,44)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M0,-4 C2.140000104904175,-4 3.890000104904175,-2.319999933242798 4,-0.20000000298023224 C4,-0.20000000298023224 4,0 4,0 C4,0 4,0.20000000298023224 4,0.20000000298023224 C3.890000104904175,2.319999933242798 2.140000104904175,4 0,4 C-2.2100000381469727,4 -4,2.2100000381469727 -4,0 C-4,-2.2100000381469727 -2.2100000381469727,-4 0,-4z"></path></g></g></g></svg>`
        const dot = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" width="18" height="18" preserveAspectRatio="xMidYMid meet"><defs><clipPath id="__lottie_element_25"><rect width="18" height="18" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_25)"><g transform="matrix(1,0,0,1,8.937000274658203,8.25)" opacity="0.14" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0.07500000298023224,1.2130000591278076)"><path fill="rgb(251,114,153)" fill-opacity="1" d=" M9,-3.5 C9,-3.5 9,3.5 9,3.5 C9,5.707600116729736 7.207600116729736,7.5 5,7.5 C5,7.5 -5,7.5 -5,7.5 C-7.207600116729736,7.5 -9,5.707600116729736 -9,3.5 C-9,3.5 -9,-3.5 -9,-3.5 C-9,-5.707600116729736 -7.207600116729736,-7.5 -5,-7.5 C-5,-7.5 5,-7.5 5,-7.5 C7.207600116729736,-7.5 9,-5.707600116729736 9,-3.5z"></path></g></g><g transform="matrix(1,0,0,1,9.140999794006348,8.67199993133545)" opacity="0.28" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,-0.1509999930858612,0.7990000247955322)"><path fill="rgb(251,114,153)" fill-opacity="1" d=" M8,-3 C8,-3 8,3 8,3 C8,4.931650161743164 6.431650161743164,6.5 4.5,6.5 C4.5,6.5 -4.5,6.5 -4.5,6.5 C-6.431650161743164,6.5 -8,4.931650161743164 -8,3 C-8,3 -8,-3 -8,-3 C-8,-4.931650161743164 -6.431650161743164,-6.5 -4.5,-6.5 C-4.5,-6.5 4.5,-6.5 4.5,-6.5 C6.431650161743164,-6.5 8,-4.931650161743164 8,-3z"></path></g></g><g transform="matrix(0.9883429408073425,-0.7275781631469727,0.6775955557823181,0.920446515083313,7.3224687576293945,-0.7606706619262695)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(0.9937776327133179,-0.11138220876455307,0.11138220876455307,0.9937776327133179,-2.5239999294281006,1.3849999904632568)"><path fill="rgb(0,0,0)" fill-opacity="1" d=" M0.75,-1.25 C0.75,-1.25 0.75,1.25 0.75,1.25 C0.75,1.663925051689148 0.4139249920845032,2 0,2 C0,2 0,2 0,2 C-0.4139249920845032,2 -0.75,1.663925051689148 -0.75,1.25 C-0.75,1.25 -0.75,-1.25 -0.75,-1.25 C-0.75,-1.663925051689148 -0.4139249920845032,-2 0,-2 C0,-2 0,-2 0,-2 C0.4139249920845032,-2 0.75,-1.663925051689148 0.75,-1.25z"></path></g></g><g transform="matrix(1.1436611413955688,0.7535901665687561,-0.6317168474197388,0.9587040543556213,16.0070743560791,2.902894973754883)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(0.992861807346344,0.1192704513669014,-0.1192704513669014,0.992861807346344,-2.5239999294281006,1.3849999904632568)"><path fill="rgb(0,0,0)" fill-opacity="1" d=" M0.75,-1.25 C0.75,-1.25 0.75,1.25 0.75,1.25 C0.75,1.663925051689148 0.4139249920845032,2 0,2 C0,2 0,2 0,2 C-0.4139249920845032,2 -0.75,1.663925051689148 -0.75,1.25 C-0.75,1.25 -0.75,-1.25 -0.75,-1.25 C-0.75,-1.663925051689148 -0.4139249920845032,-2 0,-2 C0,-2 0,-2 0,-2 C0.4139249920845032,-2 0.75,-1.663925051689148 0.75,-1.25z"></path></g></g><g transform="matrix(1,0,0,1,8.890999794006348,8.406000137329102)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0.09099999815225601,1.1009999513626099)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M7,-3 C7,-3 7,3 7,3 C7,4.379749774932861 5.879749774932861,5.5 4.5,5.5 C4.5,5.5 -4.5,5.5 -4.5,5.5 C-5.879749774932861,5.5 -7,4.379749774932861 -7,3 C-7,3 -7,-3 -7,-3 C-7,-4.379749774932861 -5.879749774932861,-5.5 -4.5,-5.5 C-4.5,-5.5 4.5,-5.5 4.5,-5.5 C5.879749774932861,-5.5 7,-4.379749774932861 7,-3z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(0,0,0)" stroke-opacity="1" stroke-width="1.5" d=" M7,-3 C7,-3 7,3 7,3 C7,4.379749774932861 5.879749774932861,5.5 4.5,5.5 C4.5,5.5 -4.5,5.5 -4.5,5.5 C-5.879749774932861,5.5 -7,4.379749774932861 -7,3 C-7,3 -7,-3 -7,-3 C-7,-4.379749774932861 -5.879749774932861,-5.5 -4.5,-5.5 C-4.5,-5.5 4.5,-5.5 4.5,-5.5 C5.879749774932861,-5.5 7,-4.379749774932861 7,-3z"></path></g></g><g transform="matrix(1,0,0,1,8.89900016784668,8.083999633789062)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,-2.5239999294281006,1.3849999904632568)"><path fill="rgb(0,0,0)" fill-opacity="1" d=" M0.875,-1.125 C0.875,-1.125 0.875,1.125 0.875,1.125 C0.875,1.607912540435791 0.48291251063346863,2 0,2 C0,2 0,2 0,2 C-0.48291251063346863,2 -0.875,1.607912540435791 -0.875,1.125 C-0.875,1.125 -0.875,-1.125 -0.875,-1.125 C-0.875,-1.607912540435791 -0.48291251063346863,-2 0,-2 C0,-2 0,-2 0,-2 C0.48291251063346863,-2 0.875,-1.607912540435791 0.875,-1.125z"></path></g></g><g transform="matrix(1,0,0,1,14.008999824523926,8.083999633789062)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,-2.5239999294281006,1.3849999904632568)"><path fill="rgb(0,0,0)" fill-opacity="1" d=" M0.8999999761581421,-1.100000023841858 C0.8999999761581421,-1.100000023841858 0.8999999761581421,1.100000023841858 0.8999999761581421,1.100000023841858 C0.8999999761581421,1.596709966659546 0.4967099726200104,2 0,2 C0,2 0,2 0,2 C-0.4967099726200104,2 -0.8999999761581421,1.596709966659546 -0.8999999761581421,1.100000023841858 C-0.8999999761581421,1.100000023841858 -0.8999999761581421,-1.100000023841858 -0.8999999761581421,-1.100000023841858 C-0.8999999761581421,-1.596709966659546 -0.4967099726200104,-2 0,-2 C0,-2 0,-2 0,-2 C0.4967099726200104,-2 0.8999999761581421,-1.596709966659546 0.8999999761581421,-1.100000023841858z"></path></g></g></g></svg>`
        const playBig = `<svg viewBox="0 0 80 80" width="80" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="pid-53-svgo-a" d="M0 0h80v80H0z"></path><path d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z" id="pid-53-svgo-d"></path><filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox" id="pid-53-svgo-c"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset><feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="shadowMatrixOuter2"></feMergeNode></feMerge></filter></defs><g fill="none" fill-rule="evenodd" opacity=".8"><mask id="pid-53-svgo-b" fill="#fff"><use xlink:href="#pid-53-svgo-a"></use></mask><g mask="url(#pid-53-svgo-b)"><use fill="#000" filter="url(#pid-53-svgo-c)" xlink:href="#pid-53-svgo-d"></use><use fill="#FFF" xlink:href="#pid-53-svgo-d"></use></g></g></svg>`

        const registerIcon = NPlayer.Player.Icon.register
        registerIcon('play', createIcon(play))
        registerIcon('volume', createIcon(volume))
        registerIcon('cog', createIcon(cog))
        registerIcon('webEnterFullscreen', createIcon(webFull))
        registerIcon('enterFullscreen', createIcon(full))
        // 播放器初始化
        window.player = new NPlayer.Player({
          src: '',
          autoplay: false,
          loop: false,
          muted: false,
          volume: 1,
          poster: '',
          themeColor: 'rgba(35,173,229, 1)',
          progressBg: 'rgba(35,173,229, 1)',
          volumeProgressBg: 'rgba(35,173,229, 1)',
          progressDot: createIcon(dot, true)(),
          posterPlayEl: createIcon(playBig)(),
        })

        // 挂载播放器
        window.player.mount('#nplayer')

        console.log('NPlayer初始化成功')
      })

      // 播放列表数据
      const playlist = []
      let currentIndex = -1
      let webtorrentClient = null

      // DOM元素
      const fileInput = document.getElementById('file-input')
      const playlistEl = document.getElementById('playlist')
      const addUrlBtn = document.getElementById('add-url')
      const removeSelectedBtn = document.getElementById('remove-selected')
      const statusDot = document.getElementById('status-dot')
      const statusText = document.getElementById('status-text')

      // 更新状态提示
      function updateStatus(message, status = 'playing') {
        statusText.textContent = message
        statusDot.className = 'status-dot'
        statusDot.classList.add(status)
      }

      // 添加本地文件
      fileInput.addEventListener('change', (e) => {
        const files = Array.from(e.target.files)
        console.log('选择的文件:', files.map(f => ({ name: f.name, size: f.size, type: f.type })))
        
        files.forEach((file) => {
          const url = URL.createObjectURL(file)
          const type = getFileType(file.name)
          
          console.log('处理文件:', {
            fileName: file.name,
            fileSize: file.size,
            mimeType: file.type,
            detectedType: type,
            blobUrl: url
          })

          // 特殊处理：WebTorrent种子文件
          if (type === 'torrent') {
            // 直接使用种子文件路径
            addToPlaylist({
              title: file.name,
              url: URL.createObjectURL(file),
              type: 'webtorrent',
            })
          } else {
            addToPlaylist({
              title: file.name,
              url: url,
              type: type,
            })
          }
        })
        fileInput.value = ''
      })

      // 删除选中项
      removeSelectedBtn.addEventListener('click', () => {
        const selectedItems = Array.from(
          playlistEl.querySelectorAll('li input[type="checkbox"]:checked')
        ).map((checkbox) => checkbox.closest('li').dataset.index)

        // 从后往前删除避免索引变化
        selectedItems
          .sort((a, b) => b - a)
          .forEach((index) => {
            const video = playlist[index]
            // 释放Blob URL内存
            if (video.url.startsWith('blob:')) {
              URL.revokeObjectURL(video.url)
            }
            playlist.splice(index, 1)
            // 如果删除的是当前播放项，停止播放
            if (parseInt(index) === currentIndex) {
              if (window.player) {
                window.player.pause()
              }
              currentIndex = -1
            }
          })
        renderPlaylist()
        updateStatus('已删除选中项目')
      })

      // 添加视频到播放列表
      function addToPlaylist(video) {
        console.log('添加到播放列表:', {
          title: video.title,
          url: video.url,
          type: video.type,
          playlistLength: playlist.length
        })
        
        playlist.push(video)
        renderPlaylist()

        // 如果是第一个视频自动播放
        if (playlist.length === 1) {
          console.log('自动播放第一个视频')
          playVideo(0)
        }
      }

      // 渲染播放列表
      function renderPlaylist() {
        playlistEl.innerHTML = ''
        playlist.forEach((video, index) => {
          const li = document.createElement('li')
          li.dataset.index = index
          if (index === currentIndex) li.classList.add('active')

          li.innerHTML = `
                    <div class="checkbox">
                        <input type="checkbox" id="item-${index}">
                    </div>
                    <div class="video-info">
                        <div class="title">${video.title}</div>
                        <div class="url">${
                          video.url.length > 50
                            ? video.url.substring(0, 50) + '...'
                            : video.url
                        }</div>
                    </div>
                    <span class="format-tag ${getFormatTagClass(video.type)}">
                        ${formatTypeName(video.type)}
                    </span>
                `

          li.addEventListener('click', (e) => {
            // 避免点击checkbox时触发播放
            if (e.target.tagName !== 'INPUT') {
              playVideo(index)
            }
          })

          playlistEl.appendChild(li)
        })
      }

      // 获取格式标签的类名
      function getFormatTagClass(type) {
        const map = {
          flv: 'flv-tag',
          m3u8: 'm3u8-tag',
          hls: 'm3u8-tag',
          dash: 'dash-tag',
          webtorrent: 'webtorrent-tag',
          torrent: 'webtorrent-tag',
        }
        return map[type] || ''
      }

      // 格式化类型名称
      function formatTypeName(type) {
        const map = {
          flv: 'FLV',
          m3u8: 'HLS',
          hls: 'HLS',
          dash: 'DASH',
          webtorrent: 'Torrent',
          torrent: 'Torrent',
          mp4: 'MP4',
          webm: 'WebM',
          ogg: 'OGG',
          avi: 'AVI',
          mkv: 'MKV',
          mov: 'MOV',
          wmv: 'WMV',
        }
        return map[type] || type.toUpperCase()
      }

      // 播放指定索引的视频（已修改为NPlayer）
      function playVideo(index) {
        if (index < 0 || index >= playlist.length) return

        const video = playlist[index]
        currentIndex = index
        renderPlaylist()
        updateStatus('正在加载视频...', 'connecting')

        // 销毁之前的WebTorrent实例
        if (webtorrentClient) {
          webtorrentClient.destroy()
          webtorrentClient = null
        }

        try {
          if (!window.player) {
            updateStatus('播放器未初始化', 'error')
            return
          }

          let finalUrl = video.url

          // 处理不同格式的视频
          if (video.type === 'm3u8' || video.type === 'hls') {
            // HLS格式处理
            if (typeof Hls !== 'undefined' && Hls.isSupported()) {
              const hls = new Hls({
                enableWorker: false,
                lowLatencyMode: true,
              })
              hls.loadSource(finalUrl)
              hls.attachMedia(window.player.video)
              
              hls.on(Hls.Events.MANIFEST_PARSED, () => {
                updateStatus('HLS流已加载', 'playing')
              })
              
              hls.on(Hls.Events.ERROR, (event, data) => {
                console.error('HLS错误:', data)
                updateStatus('HLS播放错误: ' + data.details, 'error')
              })
            } else if (window.player.video.canPlayType('application/vnd.apple.mpegurl')) {
              // Safari等原生支持HLS的浏览器
              window.player.src = finalUrl
            } else {
              updateStatus('浏览器不支持HLS格式', 'error')
              return
            }
          } else if (video.type === 'flv') {
            // FLV格式处理
            if (typeof flvjs !== 'undefined' && flvjs.isSupported()) {
              const flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: finalUrl,
                isLive: false,
                hasAudio: true,
                hasVideo: true,
                enableWorker: false,
                enableStashBuffer: true,
                stashInitialSize: 128,
                seekType: 'range',
                accurateSeek: true,
                lazyLoad: false,
                lazyLoadMaxDuration: 0
              })
              flvPlayer.attachMediaElement(window.player.video)
              flvPlayer.load()
              
              flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
                updateStatus('FLV流已加载', 'playing')
                console.log('FLV加载完成，时长:', flvPlayer.duration)
              })
              
              flvPlayer.on(flvjs.Events.METADATA_ARRIVED, () => {
                console.log('FLV元数据已加载')
                updateStatus('FLV元数据已加载', 'playing')
              })
              
              flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail) => {
                console.error('FLV错误:', errorType, errorDetail)
                updateStatus('FLV播放错误: ' + errorDetail, 'error')
              })
            } else {
              updateStatus('浏览器不支持FLV格式', 'error')
              return
            }
          } else if (video.type === 'dash') {
            // DASH格式处理
            if (typeof dashjs !== 'undefined') {
              const dashPlayer = dashjs.MediaPlayer().create()
              dashPlayer.initialize(window.player.video, finalUrl, false)
              
              dashPlayer.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, () => {
                updateStatus('DASH流已加载', 'playing')
              })
              
              dashPlayer.on(dashjs.MediaPlayer.events.ERROR, (e) => {
                console.error('DASH错误:', e)
                updateStatus('DASH播放错误: ' + e.error, 'error')
              })
            } else {
              updateStatus('浏览器不支持DASH格式', 'error')
              return
            }
          } else if (video.type === 'torrent' || video.type === 'webtorrent') {
            // WebTorrent处理
            if (typeof WebTorrent !== 'undefined') {
              webtorrentClient = new WebTorrent()
              updateStatus('正在加载种子文件...', 'connecting')
              
              webtorrentClient.add(finalUrl, (torrent) => {
                const videoFile = torrent.files.find((file) => {
                  const ext = file.name.split('.').pop().toLowerCase()
                  return ['mp4', 'webm', 'ogg', 'avi', 'mkv'].includes(ext)
                })
                
                if (videoFile) {
                  videoFile.renderTo(window.player.video, {
                    autoplay: false,
                    controls: false
                  })
                  updateStatus('种子文件已加载: ' + videoFile.name, 'playing')
                } else {
                  updateStatus('错误：种子中未找到可播放的视频文件', 'error')
                }
              })
              
              webtorrentClient.on('error', (err) => {
                console.error('WebTorrent错误:', err)
                updateStatus('WebTorrent错误: ' + err.message, 'error')
              })
            } else {
              updateStatus('浏览器不支持WebTorrent', 'error')
              return
            }
          } else {
            // 普通视频格式 (MP4, WebM, OGG等)
            console.log('播放普通视频格式:', {
              title: video.title,
              type: video.type,
              url: finalUrl,
              urlType: finalUrl.startsWith('blob:') ? 'Blob URL' : 'Regular URL'
            })
            
            // 确保正确设置视频源
            if (window.player && window.player.video) {
              window.player.video.src = finalUrl
              window.player.video.load()
              updateStatus('正在加载: ' + formatTypeName(video.type) + ' 格式', 'connecting')
            } else {
              window.player.src = finalUrl
              updateStatus('正在加载: ' + formatTypeName(video.type) + ' 格式', 'connecting')
            }
          }

          // 事件监听
          window.player.on('canplay', () => {
            console.log('视频可以播放:', video.title)
            updateStatus('正在播放: ' + video.title, 'playing')
          })

          window.player.on('loadstart', () => {
            console.log('开始加载视频:', video.title)
          })

          window.player.on('loadedmetadata', () => {
            console.log('视频元数据已加载:', video.title)
          })

          window.player.on('error', (err) => {
            console.error('播放器错误:', {
              title: video.title,
              error: err,
              src: window.player.src,
              readyState: window.player.video ? window.player.video.readyState : 'N/A',
              networkState: window.player.video ? window.player.video.networkState : 'N/A'
            })
            updateStatus('播放错误: ' + (err.message || '未知错误'), 'error')
          })

          // 添加原生video元素的错误监听
          if (window.player.video) {
            window.player.video.addEventListener('error', (e) => {
              console.error('原生video错误:', {
                title: video.title,
                error: e.target.error,
                code: e.target.error ? e.target.error.code : 'N/A',
                message: e.target.error ? e.target.error.message : 'N/A'
              })
            })
          }

          // 开始播放
          console.log('尝试播放视频:', video.title)
          const playPromise = window.player.play()
          
          if (playPromise !== undefined) {
            playPromise.then(() => {
              console.log('播放成功启动:', video.title)
            }).catch((error) => {
              console.error('播放启动失败:', {
                title: video.title,
                error: error,
                name: error.name,
                message: error.message
              })
              updateStatus('播放启动失败: ' + error.message, 'error')
            })
          }
        } catch (e) {
          console.error('播放失败:', e)
          updateStatus('播放失败: ' + e.message, 'error')
        }
      }

      // 根据文件名或URL获取文件类型
      function getFileType(filename) {
        // 处理磁力链接
        if (filename.startsWith('magnet:')) {
          return 'webtorrent'
        }

        // 处理URL中的文件类型
        const url = filename.toLowerCase()
        if (url.includes('.m3u8') || url.includes('.ts')) return 'm3u8'
        if (url.includes('.flv')) return 'flv'
        if (url.includes('.mpd') || url.includes('.m4s')) return 'dash'
        if (url.includes('.torrent')) return 'torrent'
        if (url.includes('webtorrent')) return 'webtorrent'

        // 处理文件扩展名
        const ext = filename.split('.').pop().toLowerCase()
        switch (ext) {
          case 'm3u8':
          case 'ts':
            return 'm3u8'
          case 'flv':
            return 'flv'
          case 'mpd':
          case 'm4s':
            return 'dash'
          case 'torrent':
            return 'torrent'
          case 'mp4':
          case 'm4v':
          case 'mov':
            return 'mp4'
          case 'webm':
            return 'webm'
          case 'ogg':
          case 'ogv':
            return 'ogg'
          case 'avi':
          case 'mkv':
          case 'wmv':
            return 'mp4' // 这些格式通过HTML5 video标签播放
          default:
            return ext
        }
      }

      // 拖放功能支持
      playlistEl.addEventListener('dragover', (e) => {
        e.preventDefault()
        e.dataTransfer.dropEffect = 'copy'
      })

      playlistEl.addEventListener('drop', (e) => {
        e.preventDefault()
        const files = e.dataTransfer.files
        if (files.length) {
          Array.from(files).forEach((file) => {
            const fileName = file.name.toLowerCase()
            const supportedExtensions = ['.mp4', '.webm', '.ogg', '.ogv', '.flv', '.m3u8', '.ts', '.mpd', '.m4s', '.torrent', '.avi', '.mkv', '.mov', '.wmv']
            
            if (
              file.type.startsWith('video/') ||
              file.type.startsWith('application/') ||
              supportedExtensions.some(ext => fileName.endsWith(ext))
            ) {
              const url = URL.createObjectURL(file)
              const type = getFileType(file.name)
              addToPlaylist({
                title: file.name,
                url: url,
                type: type,
              })
            }
          })
        }
      })

      // 初始化状态
      updateStatus('就绪')
    </script>
    <script src="./player/model.js"></script>
  </body>
</html>
